<template>
    <div class="content-box">
        <h2 class="demo-title">安装</h2>

        <!-- 致谢 -->
        <h3 class="demo-table-title">致谢</h3>
        <div class="demo-tip">
            <p>该项目使用Vue.js3.0版本开发，实际组件虽然有做兼容适配，但是项目尽量还是使用功能vue3.0最好</p>
            <p>
                <a href="https://cn.vuejs.org/" target="_blank">https://cn.vuejs.org/</a>
            </p>
        </div>
        <div class="demo-tip">
            <p>
                该项目DEMO页面模仿
                <span style="color:#ff0000;margin:0 5px;">Element-ui</span>页面开发
            </p>
            <p>
                <a
                        href="https://element.eleme.io/#/zh-CN/component/installation"
                        target="_blank"
                >https://element.eleme.io/#/zh-CN/component/installation</a>
            </p>
        </div>

        <!-- 代码仓库 -->
<!--        <h3 class="demo-table-title">
            代码仓库
            <i class="iconfont icon-github-fill" style="margin: 0 10px;"></i>
        </h3>
        <p class="demo-introduction">
            github代码仓库地址
            <a href="https://github.com/ShnHz/shn-ui" target="_blank">
                <img
                        alt
                        class="github-img"
                        href="https://github.com/ShnHz/shn-ui"
                        src="https://img.shields.io/github/stars/ShnHz/shn-ui.svg?style=social&label=Star&maxAge=2592000"
                />
            </a>
            点个star支持一下吧~
        </p>-->

        <!-- NPM安装 -->
        <h3 class="demo-table-title">安装方式</h3>
        <p class="demo-introduction">推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。</p>
        <p class="demo-introduction">如果使用yarn安装也可以</p>
        <p class="demo-introduction">
            <a
                    href="https://www.npmjs.com/package/fhv-ui"
                    target="_blank"
            >https://www.npmjs.com/package/fhv-ui</a>
        </p>
        <div class="demo-code-block">npm i fhv-ui -S</div>

        <!-- 快速上手 -->
        <h3 class="demo-table-title">快速上手</h3>
        <p class="demo-introduction">你可以在 main.js 中引入整个 fvn-ui。</p>
        <div class="demo-code-block">
            <p>import { createApp } from 'vue'</p>
            <p>import fvnUI from 'fvn-vue-ui'</p>
            <p>const app = createApp(App)</p>
            <p style="margin-top:20px">app.use(FhvUI)</p>
        </div>

        <!-- 按需加载 -->
        <h3 class="demo-table-title">按需加载</h3>
        <p class="demo-introduction">目前该组件只能进行全局引入，按需加载引入方式后续开发中...</p>

        <!-- 开始使用 -->
        <h3 class="demo-table-title">开始使用</h3>
        <p class="demo-introduction">至此，一个基于 Vue 安装了 fhv-ui插件 的开发环境已经搭建完毕。各个组件的使用方法请参阅它们各自的文档。</p>

        <!-- 全栈之路 -->
        <h3 class="demo-table-title">全栈之路</h3>
        <p class="demo-introduction"><span>想好好学习java的同学可以试试这个</span><a target="_blank" href="https://sdky.gitee.io/1%20Java%20SE/">https://sdky.gitee.io/1%20Java%20SE/</a>
        </p>
        <p>
            <a target="_blank" href="https://sdky.gitee.io/6%20Others/80%20Web%E5%BC%80%E5%8F%91%E5%B7%A5%E7%A8%8B%E5%B8%88%E8%B7%AF%E7%BA%BF%E5%9B%BE.html">或者这个</a>
        </p>
        <p>
            <a href="http://www.macrozheng.com/#/foreword/mall_foreword_01">或者这个</a>
        </p>
        <p>
            <a href="https://www.bilibili.com/read/cv5216534">或者这个</a>
        </p>
        <p>
            <a href="https://juejin.cn/post/6844903735668244488" target="_blank">文档搭建部分技术参考文献</a>
        </p>
        <p>
            <a href="https://web.qianguyihao.com/#%E9%A1%B9%E7%9B%AE%E4%BB%8B%E7%BB%8D">前端参考文献</a>
        </p>
    </div>
</template>

<script>
    export default {
        name: 'shn-installation',
        data() {
            return {}
        },
        methods: {}
    }
</script>
<style lang="scss">
    .github-img {
        cursor: pointer;
        position: relative;
        top: 5px;
        margin: 0 8px 0 5px;
    }
</style>

